<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{ path: item.path }">{{ item.meta.title
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="query.type" placeholder="门票类型" class="handle-select mr10">
          <el-option key="0" label="儿童票" value="0"></el-option>
          <el-option key="1" label="成人票" value="1"></el-option>
          <el-option key="2" label="团体票" value="2"></el-option>
        </el-select>
        <el-input v-model="query.ticketName" placeholder="门票名" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="ticketId" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="ticketName" label="门票名" width="80"></el-table-column>
        <el-table-column label="门票类型" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.type == '0'
              ? 'danger'
              : scope.row.type == '1'
                ? 'success'
                : 'warning'
              ">
              {{
                scope.row.type == '0'
                ? '儿童票'
                : scope.row.type == '1'
                  ? '成人票'
                  : '团体票'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="att.AttractionName" label="景点" width="80"></el-table-column>
        <el-table-column prop="desc" label="详细"></el-table-column>
        <el-table-column prop="validDate" label="有效日期"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column prop="updatedAt" label="修改时间"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm title="确定要删除此用户" confirm-button-text="确定" cancel-button-text="取消"
              @confirm="handleDelete(scope.$index, scope.row)">
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination v-if="totalCount" v-model:currentPage="query.currentPage" v-model:page-size="query.pageSize"
          layout="prev, pager, next, jumper" :total="totalCount" @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-dialog v-model="centerDialogVisible" title="用户编辑" width="40%">
      <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
          <el-form-item label="门票名" prop="ticketName">
            <el-input v-model="ruleForm.ticketName" />
          </el-form-item>
          <el-form-item label="门票类型" prop="type">
            <el-radio-group v-model="ruleForm.type">
              <el-radio :label="0">儿童票</el-radio>
              <el-radio :label="1">成人票</el-radio>
              <el-radio :label="2">团体票</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="ruleForm.price" />
          </el-form-item>
          <el-form-item label="景点" prop="AttractionId">
            <el-select v-model="ruleForm.AttractionId" filterable placeholder="请选择相关景点">
              <el-option v-for="item in atts" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="详细" prop="desc">
            <el-input v-model="ruleForm.desc" />
          </el-form-item>
          <el-form-item label="有效日期" prop="validDate">
            <el-date-picker v-model="ruleForm.validDate" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm(ruleFormRef)">更新</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
          <el-button @click="centerDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive, watch } from "vue";
import request from "../../utils/request";
import { ElNotification } from "element-plus";
export default {
  setup() {
    let breadList = [] // 路由集合
    const atts = ref([]);//景点集合
    const route = useRoute()
    const getBreadcrumb = (url) => {
      let matched = url.matched;
      //如果不是首页
      if ("Home" == matched[0].name) {
        matched[0].meta = { title: "系统首页" }
      }
      breadList = matched;
    }
    watch(route, (newValue, oldValue) => {
      // console.log(222222,newValue)
      getBreadcrumb(newValue)
    }, { deep: true, immediate: true });

    const resetForm = (formEl) => {
      if (!formEl) return;
      formEl.resetFields();
    };
    const submitForm = async (formEl) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          // console.log("提交更新", fields);
          console.log(ruleForm.validDate);
          request
            .request({
              url: "/ticket/update",
              method: "post",
              data: {
                ticketId: ruleForm.ticketId,
                ticketName: ruleForm.ticketName,
                price: ruleForm.price,
                AttractionId: ruleForm.AttractionId,
                desc: ruleForm.desc,
                validDate: ruleForm.validDate,
                type: ruleForm.type
              },
            })
            .then((res) => {
              if (res.data.code == 200) {
                ElNotification({
                  title: "更新成功",
                  message: "成功更新门票信息",
                });
                // 关闭弹窗
                centerDialogVisible.value = false;
                //刷新
                getData();
              } else {
                ElNotification({
                  title: "更新失败",
                  message: "请联系管理员检查失败原因",
                });
              }
            })
            .catch((e) => {
              ElNotification({
                title: "更新失败",
                message: "请联系管理员检查失败原因",
              });
            });
        } else {
          ElNotification({
            title: "校验失败",
            message: "请重新填写信息",
          });
        }
      });
    };
    const ruleForm = reactive({
      ticketId: "",
      ticketName: "",
      price: "",
      AttractionId: "",
      desc: "",
      type: 0,
      validDate: ""
    });
    const rules = reactive({
      ticketName: [
        {
          required: true,
          message: "请输入门票名",
          trigger: "blur",
        },
      ],
      price: [
        {
          required: true,
          message: "请输入价格",
          trigger: "blur",
        },
      ],
      desc: [
        {
          required: true,
          message: "请输入描述",
          trigger: "blur",
        },
      ],
      validDate: [
        {
          required: false,
          message: "请输入有效日期",
          trigger: "blur",
        },
      ],
      type: [
        {
          required: true,
          message: "请选择门票类型",
          trigger: "change",
        },
      ]
    });
    const ruleFormRef = ref();
    const centerDialogVisible = ref(false);
    const query = reactive({
      ticketName: "",
      currentPage: 1,
      pageSize: 5,
    });
    const tableData = ref([]);
    const totalCount = ref(0);
    // 获取表格数据
    const getData = () => {
      request
        .request({
          url: "/ticket/getAllTicketsByPage",
          params: {
            ticketName: query.ticketName,
            type: query.type,
            currentPage: query.currentPage,
            pageSize: query.pageSize,
          },
          method: "get",
        })
        .then((res) => {
          //获取当前页的数据
          const rows = res.data.data.rows;

          // 遍历修改时间格式
          for (const row of rows) {
            row.validDate = formatTime(row.validDate);
            row.createdAt = formatTime(row.createdAt);
            row.updatedAt = formatTime(row.updatedAt);
          }

          tableData.value = rows;

          // 获取总记录数
          totalCount.value = res.data.data.count;
        })
        .catch((e) => {
          console.log(e);
        });
    };

    // 格式化时间函数
    const formatTime = (time) => {
      const date = new Date(time);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");

      return `${year}/${month}/${day}/${hours}:${minutes}:${seconds}`;
    };
    getData();
    // 查询操作
    const handleSearch = () => {
      getData();
    };
    // 分页导航
    const handleCurrentChange = (val) => {
      query.currentPage = val;
      getData();
      // console.log(val);
    };
    // 删除操作
    const handleDelete = (index, row) => {
      request
        .request({
          url: "/ticket/delete",
          method: "get",
          params: {
            ticketId: row.ticketId,
          },
        })
        .then((res) => {
          if (res.data.msg == "success") {
            getData();
            ElNotification({
              title: "删除成功",
              message: "成功删除门票信息",
            });
          } else {
            ElNotification({
              title: "删除失败",
              message: "请联系管理员检查失败原因",
            });
          }
        })
        .catch((e) => {
          ElNotification({
            title: "删除失败",
            message: "请联系管理员检查失败原因",
          });
        });
    };
    // 获取景点数据
    const getAttraction = () => {
      request
        .request({
          url: "/attraction/getAllAttraction",
          method: "get",
        })
        .then((res) => {
          //获取当前页的数据
          atts.value = res.data.data;
          console.log(JSON.stringify(atts) + "所有景点");
        })
        .catch((e) => {
          console.log(e);
        });
    };
    getAttraction();
    const handleEdit = (index, row) => {
      centerDialogVisible.value = true;
      ruleForm.ticketId = row.ticketId;
      ruleForm.ticketName = row.ticketName;
      ruleForm.price = row.price;
      ruleForm.AttractionId = row.AttractionId;
      ruleForm.desc = row.desc;
      ruleForm.validDate = row.validDate;
    };
    return {
      breadList,
      resetForm,
      ruleFormRef,
      submitForm,
      ruleForm,
      rules,
      centerDialogVisible,
      query,
      totalCount,
      tableData,
      getData,
      handleEdit,
      handleSearch,
      handleCurrentChange,
      handleDelete,
      getAttraction,
      atts
    };
  },
};
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
  